<template>
	<div class="music-type-ctrl-page">
		<div class="page-content">

			<Row class="header-bar">
				<Col span="1">序号</Col>
				<Col span="2">图片</Col>
				<Col span="4">名称</Col>
				<Col span="2">叶子节点</Col>
				<Col span="2">专辑</Col>
				<Col span="2">价格/￥</Col>
				<Col span="2">首页推荐</Col>
				<Col span="8">操作</Col>
				<Col span="1">
				<Button type="ghost" style="border:none" @click="clickAddBtn()">
					<Icon type="plus-round" size="24"></Icon>
				</Button>
				</Col>
			</Row>
			<div class="no-data" v-if="musicTypeList.length === 0">暂无数据</div>
			<transition name="fade">
				<div v-if="musicTypeList.length">
					<div class="menu-item" v-for="(item,index) in musicTypeList" :key="item.uuid">
						<Row class="item">
							<Col span="1" @click.native="showChildren(item,index)">
							<span class="va-md">{{index + 1}}</span>
							<Icon class="va-md arrow-icon" type="arrow-right-b" size="14" v-if="item.leaf_flag == '0'" :class="{'menu-opened':item.show}"></Icon>
							</Col>
							<Col span="2">
							<img :src="postUrl.imgPath + item.icon_url" alt="">
							</Col>
							<Col span="4">{{item.type_name}}</Col>
							<Col span="2">
							<Icon type="checkmark-circled" size="16" color="#00a854" v-if="item.leaf_flag == '1'"></Icon>
							<Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
							</Col>

							<Col span="2">
							<Icon type="checkmark-circled" size="16" color="#00a854" v-if="item.is_album == '1'"></Icon>
							<Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
							</Col>
							<Col span="2">{{item.is_album == '1' ? item.sale_price :'--'}}</Col>
							<Col span="2">
							<Icon type="checkmark-circled" size="16" color="#00a854" v-if="item.recommend_flag == '1'"></Icon>
							<Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
							</Col>
							<Col span="8" class="va-md-btns">
							<Button type="ghost" style="border:none" @click="clickEditBtn(item)">
								<Icon type="edit" size="20" class="va-md"></Icon>
							</Button>
							<Button type="ghost" style="border:none" :disabled="index == 0" @click="sortList(-1,index)">
								<Icon type="arrow-up-c" size="22" class="va-md"></Icon>
							</Button>
							<Button type="ghost" style="border:none" :disabled="index == musicTypeList.length - 1" @click="sortList(1,index)">
								<Icon type="arrow-down-c" size="22" class="va-md"></Icon>
							</Button>
							<Button type="ghost" style="border:none" @click="deleteType(item,index)">
								<Icon type="trash-b" color="#f04134" size="22" class="va-md"></Icon>
							</Button>

							</Col>
							<Col span="1">
							<Button type="ghost" style="border:none" @click="clickAddBtn(item)" v-if="item.leaf_flag == '0'">
								<Icon type="plus-round" size="18"></Icon>
							</Button>
							</Col>
						</Row>
						<div class="child-box" :class="{'close':!item.show}" :style="{'max-height':item.children && item.children.length ? item.children.length * 50 +  'px':'0' }">
							<Row class="item child-item" v-if="item.children && item.children.length" v-for="(child,childIndex) in item.children" :key="child.uuid">
								<Col span="1">{{(index + 1) + '.' + (childIndex + 1)}}</Col>
								<Col span="2">
								<img :src="postUrl.imgPath + child.icon_url" alt="">
								</Col>
								<Col span="4">{{child.type_name}}</Col>
								<Col span="2">
								<Icon type="checkmark-circled" size="16" color="#00a854" v-if="child.leaf_flag == '1'"></Icon>
								<Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
								</Col>
								<Col span="2">
								<Icon type="checkmark-circled" size="16" color="#00a854" v-if="child.is_album == '1'"></Icon>
								<Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
								</Col>
								<Col span="2">{{child.is_album == '1' ? child.sale_price :'--'}}</Col>
								<Col span="2">
								<Icon type="checkmark-circled" size="16" color="#00a854" v-if="child.recommend_flag == '1'"></Icon>
								<Icon type="close-circled" size="16" color="#f04134" v-else></Icon>
								</Col>
								<Col span="8">
								<Button type="ghost" style="border:none" @click="clickEditBtn(child)">
									<Icon type="edit" size="18" class="va-md"></Icon>
								</Button>
								<Button type="ghost" style="border:none" :disabled="childIndex == 0" @click="sortList(-1,index,childIndex)">
									<Icon type="arrow-up-c" size="20" class="va-md"></Icon>
								</Button>
								<Button type="ghost" style="border:none" :disabled="childIndex == item.children.length - 1" @click="sortList(1,index,childIndex)">
									<Icon type="arrow-down-c" size="20" class="va-md"></Icon>
								</Button>
								<Button type="ghost" style="border:none" @click="deleteType(1,index,childIndex)">
									<Icon type="trash-b" color="#f04134" size="20" class="va-md"></Icon>
								</Button>

								</Col>
								<Col span="1">

								</Col>
							</Row>
						</div>
					</div>
				</div>
			</transition>
			<add-edit-modal v-model="showEditModal" @on-add-success="addNewTypeSuccess" :inject="injectData"></add-edit-modal>
			<transition name="fade">
				<div class="loading-cover" v-if="showCoverLoading">
					<Spin fix size="large"></Spin>
				</div>
			</transition>
		</div>
	</div>
</template>
<script src="./music-type-ctrl.js">
</script>
<style lang="scss" src="./music-type-ctrl.scss">

</style>
